<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/fragment::top">

</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="common/fragment::leftmenu"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="common/fragment::header"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">
            <div>
                <form action="#!" class="horizontal " id="add-user-form" method="post">
                    <!--

                                      <div class="form-group">
                                        <label class="col-md-3 control-label" for="example-hf-email">邮箱</label>
                                        <div class="col-md-7">
                                          <input class="form-control" type="email" id="example-hf-email" name="example-hf-email" placeholder="请输入邮箱..">
                                        </div>
                                      </div>
                    -->

                    <!--                                    hidden用户id-->
                    <input hidden="hidden" id="userid" th:value="${userPO.id}">
                    <!--用户名-->
                    <div class="form-group col-md-10 ">
                        <label class="col-md-2 control-label" for="username" style="text-align: center;line-height: 36px">姓名</label>
                        <div class="col-md-8">
                            <input class="form-control" id="username" name="username"
                                   placeholder="姓名" th:value="${userPO.username}" type="text">
                        </div>
                    </div>



                    <!--登入名-->
                    <div class="form-group col-md-10">
                        <label class="col-md-2 control-label" for="loginname" style="text-align: center;line-height: 36px">登入名</label>
                        <div class="col-md-8">
                            <input class="form-control" id="loginname" name="loginname" placeholder="登入名"
                                   readonly th:value="${userPO.loginname}" type="text">
                        </div>
                    </div>

                    <!--密码-->
                    <div class="form-group col-md-10">
                        <label class="col-md-2 control-label" for="password" style="text-align: center;line-height: 36px" t>密码</label>
                        <div class="col-md-3">
                            <input class="form-control" id="password" name="password"
                                   placeholder="密码" type="password" th:value="${userPO.password}">
                        </div>
                        <label class="col-md-2 control-label" for="repassword" style="text-align: center;line-height: 36px" >再输一次</label>
                        <div class="col-md-3">
                            <input class="form-control" id="repassword"
                                   placeholder="密码" type="password" th:value="${userPO.password}">
                        </div>
                    </div>

                    <!--头像-->
                    <div class="form-group col-md-10">
                        <label class="col-md-2 control-label" for="userPic" style="text-align: center;line-height: 36px">头像</label>
                        <div class="col-md-8">
                            <input class="form-control " id="userPic" name="userPic"
                                   placeholder="头像" th:value="${userPO.userPic}" type="text">
                        </div>
                    </div>

                    <!--电话-->
                    <div class="form-group col-md-10">
                        <label class="col-md-2 control-label" for="phone" style="text-align: center;line-height: 36px">电话</label>
                        <div class="col-md-8">
                            <input class="form-control " id="phone" name="phone"
                                   placeholder="电话" th:value="${userPO.phone}" type="tel">
                        </div>
                    </div>

                    <!--邮箱-->
                    <div class="form-group col-md-10">
                        <label class="col-md-2 control-label" for="email" style="text-align: center;line-height: 36px">邮箱</label>
                        <div class="col-md-8">
                            <input class="form-control " id="email" name="email"
                                   placeholder="邮箱" th:value="${userPO.email}" type="email">
                        </div>
                    </div>

                    <!--性别-->
                    <div class="form-group col-md-10">
                        <label class="col-md-2 control-label" style="text-align: center;line-height: 36px">性别</label>
                        <div class="col-md-8">
                            <label class="lyear-radio radio-inline radio-primary">
                                <input
                                        name="gender"
                                        th:checked="${userPO.gender}==1"
                                        type="radio"
                                        value="1"
                                >
                                <span>男</span>
                            </label>

                            <label class="lyear-radio radio-inline radio-primary">
                                <input
                                        name="gender"
                                        th:checked="${userPO.gender}==-1"
                                        type="radio"
                                        value="-1"
                                >
                                <span>女</span>
                            </label>

                            <label class="lyear-radio radio-inline radio-primary">
                                <input
                                        name="gender"
                                        th:checked="${userPO.gender}==0"
                                        type="radio"
                                        value="0"
                                >
                                <span>未知</span>
                            </label>
                        </div>
                    </div>

                    <!--END -- 性别-->



                    <!--备注-->
                    <div class="form-group col-md-10">
                        <label class="col-md-2 control-label" for="comment" style="text-align: center;line-height: 36px">备注</label>
                        <div class="col-md-8">
                            <input class="form-control " id="comment" name="comment"
                                   placeholder=".....备注....." th:value="${userPO.comment}"
                                   type="text"
                            >
                        </div>
                    </div>

                    <div class="form-group col-md-10">
                        <button
                                class="btn btn-primary ajax-post col-md-2"
                                id="edit-user-btn"
                                target-form="edit-form"
                                type="button">确 定
                        </button>
                        <button
                                class="btn btn-default col-md-2"
                                onclick="history.back(-1);return false;"
                                type="button">返 回
                        </button>
                    </div>
                </form>
            </div>
    </div>
    </main>
    <!--End 页面主要内容-->
</div>
</div>

<div th:insert="common/fragment::tail-script"></div>

<script type="text/javascript">
    $(function () {
        //动态选择框，上下级选中状态变化
        // $('input.checkbox-parent').on('change', function () {
        //   let dataid = $(this).attr("dataid");
        //   $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
        //
        // });
        //
        // $('input.checkbox-child').on('change', function () {
        //   if (!$(this).hasClass('checkbox-parent')) {
        //     var dataid = $(this).attr("dataid");
        //     dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        //     var parent = $('input[dataid=' + dataid + ']');
        //     if ($(this).is(':checked')) {
        //       parent.prop('checked', true);
        //       //循环到顶级
        //       while (dataid.lastIndexOf("-") != 2) {
        //         dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        //         parent = $('input[dataid=' + dataid + ']');
        //         parent.prop('checked', true);
        //       }
        //     } else {
        //       //父级
        //       if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
        //         parent.prop('checked', false);
        //         //循环到顶级
        //         while (dataid.lastIndexOf("-") != 2) {
        //           dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        //           parent = $('input[dataid=' + dataid + ']');
        //           if ($('input[dataid^=' + dataid + '-]:checked').length == 0) {
        //             parent.prop('checked', false);
        //           }
        //         }
        //       }
        //     }
        //   }
        //
        // });

        // 添加role按钮提交 - addrole.ajax
        $('#edit-user-btn').on('click', function (e) {
            // 1 检查角色名
            let username = $('#username').val();
            let status = $('input[name=status]:checked').val()
            if (status == 'on') {
                status = 1
            } else {
                status = -1
            }

            let loginname = $('#loginname').val()

            let password = $('#password').val()
            let repassword = $('#repassword').val()
            let userPic = $('#userPic').val()
            let phone = $('#phone').val()
            let email = $('#email').val()
            let gender = $('input[name=gender]:checked').val()
            let role = $('#role').val()
            let comment = $('#comment').val()
            let userid = $('#userid').val()


            if (username == '') {
                confirmMsg('请填写姓名')
                return
            }

            if (loginname == '') {
                confirmMsg('请填写登入名')
                return
            }

            if (password == '') {
                confirmMsg('请填写密码')
                return
            }

            if (repassword !== password) {
                confirmMsg('两次密码不一致')
                return
            }

            if (role == '') {
                confirmMsg('请选择角色')
                return
            }

            //生成data -- json

            let rolePO = {}
            rolePO.id = role
            let data = {
                id: userid,
                username: username,
                status: status,
                loginname: loginname,
                password: password,
                userPic: userPic,
                phone: phone,
                email: email,
                gender: gender,
                "role": {id: role},
                comment: comment
            }
            /*//   let data = $('#icon-form').serialize()*/
            console.log(data)
            e.preventDefault()
            post_ajax('/user/edituser.ajax', data, '/user/userlist.do');

        });
    });
</script>
</body>
</html>